export default class Draw {
  constructor(context) {
    this.context = context;
  }
  drawLine(x, y, x1, y1, lineWidth = 1, color = "#f0ff00") {
    this.context.lineWidth = lineWidth;
    this.context.strokeStyle = color;
    this.context.beginPath();
    this.context.moveTo(x, y); 
    this.context.lineTo(x1, y1);
    this.context.stroke();
  }
  clear() {
    let width = this.context.canvas.width;
    let height = this.context.canvas.height;
    this.context.clearRect(0, 0, width, height);
  }
  putImageData(data,x,y){
    this.context.putImageData(data,x,y)
    
  }

  drawImage(image,opt){
          this.context.drawImage(image,opt.x,opt.y,opt.w,opt.h,
           0 ,0,opt.w,opt.h)
  }
  getImageData(opt){
    return this.context.getImageData(opt.x,opt.y,opt.w,opt.h)
  }
  drawGrid(scale, show = true, transform={x:0,y:0}) {

    let size =scale
    
  
    let width = this.context.canvas.width;
    let height = this.context.canvas.height;

    let w = {
      min: -(transform.x-(transform.x%size)),
      max: width - transform.x,
    };
    let h = {
      min: -(transform.y - (transform.y % size)),
      max: height - transform.y,
    };

    for (let i = h.min; i < h.max; i += size) {
      let lineWidth = 0.2;
      let color = "#f0ff00"
      if (i % (size * 5) === 0) {
        lineWidth = 0.4;
      }
      if(i%(size*5)!==0&&size<=2){continue}
      if(i==0){
        color = "#ff0000"
        lineWidth = 1
      }

      this.drawLine(
        -transform.x,
        i + 0.5,
        width - transform.x,
        i + 0.5,
        lineWidth,
        color
      );
      
    }
    for(let i=w.min;i<w.max;i+=size){
      let lineWidth = 0.2;
      let color = "#f0ff00"
      if (i % (size * 5) === 0) {
        lineWidth = 0.4;
      }
      if(i%(size*5)!==0&&size<=2){continue}
      if(i==0){
        color = "#ff0000"
        lineWidth = 1
      }
      this.drawLine(i+0.5, -transform.y, i+0.5, height - transform.y, lineWidth,color);
    }
    // for(let i = h.min)

    // if(!show) return;W
    // let width = this.context.canvas.width;
    // let height = this.context.canvas.height;

    // let hstart =transform.y-transform.y%size

    // for (let i =-hstart; i < height-hstart; i += size) {
    //   let lineWidth = 0.2;
    //   let color ='#f0ff00'
    //   if (i % (size * 5) === 0) {
    //     lineWidth = 0.4;
    //   }

    //   if (!show && lineWidth === 0.2) {
    //       lineWidth = 0.4;
    //     continue;
    //   }
    //   if(i==0){
    //     lineWidth = 2
    //     color ="#ff0000"

    //   }

    //   this.drawLine(0.5, i + 0.5, width + 0.5, i + 0.5, lineWidth,color);
    // }

    // for (let i = 0; i < width; i += size) {
    //   let lineWidth = 0.2;
    //   if (i !== 0 && i % (size * 5) === 0) {
    //     lineWidth = 0.4;
    //   }
    //   if (!show && lineWidth === 0.2) {
    //     continue;
    //   }
    //   this.drawLine(i + 0.5, 0.5, i + 0.5, height + 0.5, lineWidth);
    // }
    // this.drawLine(0.5,5.5, 400.5,5.5,1)

    // this.drawLine(0.5,4.5,400.5,4.5,1)
  }
  createImageData(x,y){
    return this.context.createImageData(x,y)
  }
}
